<template>
  <div class="order">
    <el-card class="order-card1" shadow="hover">
      <template #header>
        <vab-icon icon="shopping-bag-2-line" />
        综合统计
      </template>
      <el-row class="order-card1-content">
        <el-col :span="5">
          <p>赛合人脸入</p>
          <h1>
            <vab-count
              :decimals="countConfig.decimals"
              :duration="countConfig.duration"
              :end-val="countConfig.dahuaFaceIn"
              :prefix="countConfig.prefix"
              :separator="countConfig.separator"
              :start-val="countConfig.startVal"
              :suffix="countConfig.suffix"
            />
          </h1>
        </el-col>
        <el-col :span="5">
          <p>赛合人脸出</p>
          <h1>
            <vab-count
              :decimals="countConfig.decimals"
              :duration="countConfig.duration"
              :end-val="countConfig.dahuaFaceOut"
              :prefix="countConfig.prefix"
              :separator="countConfig.separator"
              :start-val="countConfig.startVal"
              :suffix="countConfig.suffix"
            />
          </h1>
        </el-col>
        <el-col :span="4">
          <p>门禁人脸</p>
          <h1>
            <vab-count
              :decimals="countConfig.decimals"
              :duration="countConfig.duration"
              :end-val="countConfig.yushiFace"
              :prefix="countConfig.prefix"
              :separator="countConfig.separator"
              :start-val="countConfig.startVal"
              :suffix="countConfig.suffix"
            />
          </h1>
        </el-col>
        <el-col :span="5">
          <p>赛合车辆入</p>
          <h1>
            <vab-count
              :decimals="countConfig.decimals"
              :duration="countConfig.duration"
              :end-val="countConfig.dahuaCarIn"
              :prefix="countConfig.prefix"
              :separator="countConfig.separator"
              :start-val="countConfig.startVal"
              :suffix="countConfig.suffix"
            />
          </h1>
        </el-col>
        <el-col :span="5">
          <p>赛合车辆出</p>
          <h1>
            <vab-count
              :decimals="countConfig.decimals"
              :duration="countConfig.duration"
              :end-val="countConfig.dahuaCarOut"
              :prefix="countConfig.prefix"
              :separator="countConfig.separator"
              :start-val="countConfig.startVal"
              :suffix="countConfig.suffix"
            />
          </h1>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
  import VabCount from '@/extra/VabCount'
  import _ from 'lodash'
  import { getStatistic } from '@/api/sys'

  export default {
    name: 'StatisticArea',
    components: { VabCount },
    data() {
      return {
        countConfig: {
          startVal: 0,
          endVal: _.random(1000, 6000),
          decimals: 0,
          prefix: '',
          suffix: '',
          separator: ',',
          duration: 5000,
          dahuaCarIn: 0,
          dahuaCarOut: 0,
          dahuaFaceIn: 0,
          dahuaFaceOut: 0,
          yushiFace: 0,
        },
        initOptions: {
          renderer: 'svg',
        },
        option: {
          tooltip: {
            trigger: 'axis',
            extraCssText: 'z-index:1',
          },
          grid: {
            left: '3%',
            containLabel: true,
          },
        },
      }
    },
    created() {
      this.getSomeData()
    },
    methods: {
      getSomeData() {
        getStatistic()
          .then((res) => {
            if (res && res.status === 0 && res.data) {
              this.countConfig.dahuaCarIn = res.data.dahuaCarIn
              this.countConfig.dahuaCarOut = res.data.dahuaCarOut
              this.countConfig.dahuaFaceIn = res.data.dahuaFaceIn
              this.countConfig.dahuaFaceOut = res.data.dahuaFaceOut
              this.countConfig.yushiFace = res.data.yushiFace
            }
          })
          .catch((err) => {
            console.log(err)
          })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .order {
    &-card1 {
      height: 200px;
      //background: linear-gradient(to right, #60b2fb, #6485f6);

      &-content {
        text-align: center;
      }

      //::v-deep {
      //  .el-card {
      //    &__header,
      //    &__body {
      //      color: $base-color-white !important;
      //    }
      //  }
      //}
    }

    &-card2 {
      height: 490px;

      &-content {
        text-align: center;

        .order-chart {
          width: 100%;
          height: 345px;
        }
      }
    }

    margin-bottom: $base-margin;
  }
</style>
